<!DOCTYPE html>
<html>
    
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title>ПЪРВИ СТЪПКИ С BRACKETS</title>
        <meta name="description" content="Интерактивно ръководство за Brackets.">
        <link rel="stylesheet" href="main.css">
    </head>
    <body>
        
        <h1>ПЪРВИ СТЪПКИ С BRACKETS</h1>
        <h2>Това е Вашето ръководство!</h2>
        
        <!--
            СЪЗДАДЕН С <3 И JAVASCRIPT
        -->
        
        <p>
            Добре дошли в Brackets, модерен редактор за код с отворен код, който разбира от уеб дизайн. Това е лек,
            но мощен редактор за код, който слива визуалните инструменти с редактора, така че да получавате достатъчно
            помощ, когато сте в нужда.
        </p>
        
        <!--
            КАКВО Е BRACKETS?
        -->
        <p>
            <em>Brackets е един различен вид редактор.</em>
            Brackets има някои уникални функционалности, като бързо редактиране, преглед на живо и други, които може да не
            откриете в други редактори. Brackets е написан на JavaScript, HTML и CSS. Това означава, че повечето от хората,
            които използват Brackets имат уменията и да го променят и подобряват. Всъщност, ние самите използваме Brackets
            всеки ден, за да градим Brackets. За да научите повече относно ключовите функционалности, продължавайте да четете.
        </p>
        
        <!--
            ПЪРВИ СТЪПКИ С ВАШИТЕ ФАЙЛОВЕ
        -->
        
        <h3>Проектите в Brackets</h3>
        <p>
            За да редактирате своя код в Brackets, трябва да отворите папката, съдържаща файловете Ви.
            Brackets смята текущо отворената папка за „проект“; функционалностите като подсказки за кода, преглед на живо и
            бързо редактиране работят само с файловете в текущо отворената папка.
        </p>
        
        <samp>
            След като приключите с разглеждането на този примерен проект и искате да редактирате собствен код, можете да
            използвате падащото меню в лявата странична лента, за да превключвате между папките. В момента там е избрано
            „Getting Started“ — това е папката, съдържаща файла, който разглеждате в момента. Щракнете върху падащото меню и
            изберете „Отваряне на папка…“, за да отворите своя собствена папка.
            Можете да използвате това падащо меню, за да се връщате обратно към папките, които сте отворили по-рано,
            включително този примерен проект.
        </samp>
        
        <!--
            ВРЪЗКАТА МЕЖДУ HTML, CSS И JAVASCRIPT
        -->
        <h3>Бързо редактиране на CSS и JavaScript</h3>
        <p>
            Без повече превключване между документи и забравяне къде сте били последно. Когато редактирате HTML, използвайте
            комбинацията <kbd>Cmd/Ctrl + E</kbd>, за да отворите бърз редактор на място, който показва използвания CSS.
            Променете CSS кода, натиснете <kbd>ESC</kbd> и се връщате към редактирането на HTML, или просто оставете
            CSS правилата отворени и те ще станат част от редактора Ви за HTML. Ако натиснете <kbd>ESC</kbd> извън
            вмъкнатия бърз редактор, всички такива ще се скрият. Бързото редактиране разпознава и правила, описани чрез
            LESS и SCSS, включително и вложени правила.
        </p>
        
        <samp>
            Искате да го видите в действие? Поставете курсора върху елемента <!-- <samp> --> по-горе и натиснете
            <kbd>Cmd/Ctrl + E</kbd>. Би трябвало да се появи бърз редактор за CSS, показващ CSS правилото, което
            се прилага към този елемент. Бързото редактиране може да работи също и за класове и идентификатори.
            Можете дори да го използвате с Вашите файлове с LESS и SCSS.
            
            Можете да създавате правила по същия начин. Щракнете върху един от елементите <!-- <p> --> по-гори и
            натиснете <kbd>Cmd/Ctrl + E</kbd>. В момента няма правила за тях, но можете да натиснете бутона
            „Ново правило“ и да добавите ново правило за <!-- <p> -->.
        </samp>
        
        <a href="screenshots/quick-edit.png">
            <img alt="Снимка на екрана, показваща бързото редактиране на CSS" src="screenshots/quick-edit.png" />
        </a>
        
        <p>
            Можете да използвате същата клавишна комбинация, за да редактирате и други неща — например функции на
            JavaScript, цветове и времеви функции за анимации; ние постоянно добавяме още.
        </p>
        <p>
            За сега редакторите на място не могат да се влагат един в друг, така че можете да използвате бързото
            редактиране само когато курсорът е в „пълния“ редактор.
        </p>
        
        <!--
            ПРЕГЛЕД НА ЖИВО
        -->
        <h3>Преглеждайте промените в HTML и CSS на живо в браузъра</h3>
        <p>
            Нали знаете как години наред си играем на „запазване и презареждане“? Играта, в която правите
            промяна в редактора си, натискате „запазване“, превключвате към браузъра и натискате „презареждане“,
            за да видите резултата?
            С Brackets, няма да ви се налага да я играете повече.
        </p>
        <p>
            Brackets ще отвори <em>жива връзка</em> с браузъра Ви и ще му праща промените в HTML и CSS кода
            докато пишете! Може би вече правите нещо подобно с различни инструменти, работещи в браузъра, но с Brackets
            няма да има нужда да копирате готовия код обратно в редактора. Кодът Ви работи в браузъра, но
            живее в редактора!
        </p>
        
        <h3>Осветява на HTML елементи и CSS правила на живо</h3>
        <p>
            С Brackets е лесно да видите как промените Ви в HTML и CSS ще променят страницата. Когато курсорът
            е върху CSS правило, Brackets ще осветява всички елементи, върху които то влияе, в браузъра. Също
            така, докато редактирате файл с HTML, Brackets ще осветява съответстващите елементи в браузъра.
        </p>
        
        <samp>
            Ако имате Google Chrome, може да опитате това. Щракнете иконката на светкавица в горния десен
            ъгъл на прозореца на Brackets или натиснете <kbd>Cmd/Ctrl + Alt + P</kbd>. Когато прегледът на живо
            е включен за даден HTML документ, всички свързани CSS документи могат да бъдат редактирани в реално време.
            Иконката ще смени цвета си от сив на златист, когато Brackets установи връзка с браузъра Ви.
            
            Сега поставете курсора си върху елемента <!-- <img> --> по-горе. Забележете синия контур,
            който се появява около изображението в Chrome. Сега натиснете <kbd>Cmd/Ctrl + E</kbd>, за да
            отворите CSS правилата. Опитайте да промените размера на рамката от 10 на 20 пиксела или
            променете цвета на фона от „transparent“ на „hotpink“. Ако Brackets и браузърът Ви работят
            един до друг, ще видите как промените Ви автоматично се виждат в браузъра. Яко, нали?
        </samp>
        
        <p class="note">
            Засега Brackets поддържа преглед на живо само за HTML и CSS. И все пак, в текущото издание, промените във
            файловете с код на JavaScript се презареждат автоматично при запазване на файла. В момента работим върху
            поддръжката на преглед на живо и за JavaScript. Прегледът на живо работи само с Google Chrome, но се надяваме
            да поддържаме всички основни браузъри в бъдеще.
        </p>
        
        <h3>Бърз преглед</h3>
        <p>
            Онези от нас, които не могат да запомнят съответствието между цветовете, изразени чрез шестнадесетични
            числа и стойности ЧЗС, Brackets прави лесна и бърза проверката на това кой цвят се използва. Както в CSS,
            така и в HTML, можете просто да посочите дадена цветова стойност или преливка, и Brackets ще Ви покаже как
            изглежда този цвят или преливка автоматично. Същото важи и за изображенията: просто посочете връзката към
            изображението в редактора и ще се появи миниатюрен изглед на това изображение.
        </p>
        
        <samp>
            За да опитате бързия преглед сами, поставете курсора върху елемента <!-- <body> --> в началото на този
            документ и натиснете <kbd>Cmd/Ctrl + E</kbd>, за да отворите бързия редактор на CSS. Сега просто посочете
            някоя стойност за цвят. Можете да видите това и при преливките, като отворите бърз редактор за
            елемента <!-- <html> --> и посочите някоя от стойностите за фона. За да опитате прегледа на изображения,
            поставете курсора върху снимката на екрана, която може да намерите по-нагоре в този документ.
        </samp>
        
        <h3>Имате нужда от повече? Опитайте някое разширение!</h3>
        <p>
            Освен всички приятни функционалности, вградени в Brackets, нашата огромна и постоянно нарастваща
            общност от разработчици на разширения е създала стотици такива, които добавят полезни и удобни функционалности.
            Ако има нещо, от което се нуждаете, но не намирате в Brackets, много вероятно е някой вече да е създал
            разширение за това. За да разгледате или претърсите списъка от налични разширения натиснете
            <strong>Файл > Управител на разширения…</strong> и изберете раздела „Налични“. Когато намерите това,
            което искате, просто натиснете бутона „Инсталиране“ до него.
        </p>
        
        <!--
            КАЖЕТЕ НИ КАКВО МИСЛИТЕ
        -->
        <h2>Включете се</h2>
        <p>
            Brackets е проект с отворен код. Разработчици от цял свят допринасят, за да изградим заедно
            един по-добър редактор за код. Много други създават разширения, които увеличават възможностите
            на Brackets. Кажете ни какво мислите, споделете идеите си или направо се включете в проекта!
        </p>
        <ul>
            <li><a href="http://brackets.io">Brackets.io</a></li>
            <li><a href="http://blog.brackets.io">Блогът на екипа зад Brackets</a></li>
            <li><a href="https://github.com/adobe/brackets">Brackets в GitHub</a></li>
            <li><a href="https://brackets-registry.aboutweb.com">Регистър на разширенията за Brackets</a></li>
            <li><a href="https://github.com/adobe/brackets/wiki">Уикито на Brackets</a></li>
            <li><a href="https://groups.google.com/forum/#!forum/brackets-dev">Пощенският списък на разработчиците на Brackets</a></li>
            <li><a href="https://twitter.com/brackets">@brackets в Туитър</a></li>
            <li>Пишете си с разработчиците на Brackets в IRC канала <a href="http://webchat.freenode.net/?channels=brackets&uio=d4">#brackets във Freenode</a></li>
        </ul>
        
    </body>
</html>
<!--

    [[[[[[[[[[[[[[[      ]]]]]]]]]]]]]]]
    [::::::::::::::      ::::::::::::::]
    [::::::::::::::      ::::::::::::::]
    [::::::[[[[[[[:      :]]]]]]]::::::]
    [:::::[                      ]:::::]
    [:::::[                      ]:::::]
    [:::::[                      ]:::::]
    [:::::[                      ]:::::]
    [:::::[     CODE THE WEB     ]:::::]
    [:::::[  http://brackets.io  ]:::::]
    [:::::[                      ]:::::]
    [:::::[                      ]:::::]
    [:::::[                      ]:::::]
    [:::::[                      ]:::::]
    [::::::[[[[[[[:      :]]]]]]]::::::]
    [::::::::::::::      ::::::::::::::]
    [::::::::::::::      ::::::::::::::]
    [[[[[[[[[[[[[[[      ]]]]]]]]]]]]]]]

-->